<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electric Dog</title>
    <style>
        img {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            pointer-events: none;
        }
        button {
      background-color: transparent;
      border: none;
      cursor: pointer;
    }

        .container {
            position: relative;
            width: 60%;
            left: 20%;
            padding: 0;

        }

        .background-image {
            position: relative;
            width: 100%;
            height: 100%;

        }

        .right-image {
            position: absolute;
            top: 35%;
            left: 67%;
            width: 30%;
            height: 35%;
            -webkit-user-drag: none;
        }

        .left-image {
            position: absolute;
            top: 35%;
            left: 2%;
            width: 30%;
            height: 35%;
            transform: rotate(180deg);
        }

        .top-image {
            position: absolute;
            top: 2%;
            left: 34%;
            width: 30%;
            height: 35%;
            transform: rotate(270deg);
            -webkit-user-drag: none;
        }

        .bottom-image {
            position: absolute;
            top: 64%;
            left: 34%;
            width: 30%;
            height: 35%;
            transform: rotate(90deg);
            -webkit-user-drag: none;
        }
    </style>
</head>

<body>
    <p style="font-size: 30px;padding: 0px; " id="p">text</p>

    <div class="container" >
        <img class="background-image" src="./1.png" alt="Background Image">

        <button id="but0" class="top-image"></button>
        <img class="top-image" src="./2.png" alt="Overlay Image">
        
        <button id="but1" class="bottom-image"></button>
        <img class="bottom-image" src="./2.png" alt="Overlay Image">
        
        <button id="but2" class="right-image"></button>
        <img class="right-image" src="./2.png" alt="Overlay Image">
        
        <button id="but3" class="left-image"></button>
        <img class="left-image" src="./2.png" alt="Overlay Image">   
     </div>


    <script src="main.js"></script>
</body>

</html>